<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,viewport-fit=cover,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>尤迈桃李会</title>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.min.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/user.css">
    <link rel="stylesheet" href="css/ot-classroom-index.css">
    <link rel="stylesheet" href="css/ot-doctor-relevant.css">
    <script>(function () { var _53code = document.createElement("script"); _53code.src = "https://tb.53kf.com/code/code/96d8f960b261e49515450f8953b044bc5/1"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s); })();</script>
</head>

<body>
    <div class="pub_bar" title="尤迈桃李会" left="back"></div>
    <!--  -->
    <div class="pub-container has-tabbar  bgwhite" id="main">
        <!-- 公共部分 - header -->
        <header class="pub-header">
            <div class="header-box">
                <input type="text" class="search" placeholder="">
                <a href="./ot-myClass.html">
                    <div class="footprint">足迹</div>
                </a>
                <a href="./ot-signIn.html">
                    <div class="sign-in">签到</div>
                </a>
            </div>
        </header>
        <!--  -->
        <ul class="main-titles" id="selectLevel">
            <li class="oneLevel">一级科室</li>
            <li class="twoLevel">二级科室</li>
            <li class="disease">疾病</li>
            <li class="doctor">专家</li>
        </ul>
        <!--  -->
        <div class="hot-course space-border">
            <div class="hxl_tabs">
                <div class="tabs_item active">全部课程</div>
                <div class="tabs_item">短视频</div>
            </div>
            <!-- 列表 -->
            <div class="relevant_listing">
                <div class="relevant_list hot-course relevant_list1" style="display: block;">
                </div>
                <div class="relevant_list relevant_relevant relevant_list2 pt15">
                </div>
            </div>
            <!--  -->
            <div class="weui-loadmore loadMore">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
            <div class="weui-loadmore weui-loadmore_line noMore hide">
                <span class="weui-loadmore__tips">没有更多数据了</span>
            </div>
            <!--  -->
            <div class="nolist">
                <div class="nolist_img"><img src="./image/hxl/hxl-nolist.png" alt=""></div>
                <p class="nolist_p1">对不起，没有查到相关内容</p>
            </div>
            <!--  -->
            <div class="nosearch">
                <div class="nosearch_img"><img src="./image/hxl/hxl-nosearch.png" alt=""></div>
                <p class="nosearch_p1">对不起，没有查到相关内容</p>
            </div>
        </div>
        <!-- 公共footer -->
        <div class="pub-footer">
            <ul class="tabs">
                <li class="tab-classroom"><a href="./ot-classroom-index.html">首页</a></li>
                <li class="tab-doctor"><a href="./ot-doctor-index.html">名医</a></li>
                <li class="tab-curriculum active"><a href="./ot-curriculum-index.html">课程</a></li>
                <li class="tab-forum"><a href="./classroom-index.html">讲堂</a></li>
                <li class="tab-consultation"><a href="consultation-index.html">会诊</a></li>
                <li class="tab-user"><a href="user.html">我的</a></li>
            </ul>
        </div>
    </div>
    <!-- 选择四级 -->
    <div class="user-choose bgwhite" id="areaModule" style="display: none;">
        <div class="search-box">
            <input type="text" class="search" placeholder="">
        </div>
        <ul class="main-titles">
            <li class="oneLevel">一级科室</li>
            <li class="twoLevel">二级科室</li>
            <li class="disease">疾病</li>
            <li class="doctor">专家</li>
        </ul>
        <ul class="main">
            <li class="area-item" id="depart1List"></li>
            <li class="area-item" id="depart2List"></li>
            <li class="area-item" id="diseaseList"></li>
            <li class="area-item" id="doctorList"></li>
        </ul>
        <div class="footer submit-box">
            <input class="pub-submit-btn" id="doctorConfirm" type="button" value="确定">
        </div>
    </div>
    <script src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-h5-min.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-weui.min.js"></script>
    <script src="js/md5.js"></script>
    <script src="js/public.js"></script>
    <script>
        var page = 0
        var pages = 0

        let picker = {
            depart1: sortFilter(getQueryString('sortId'), '_', 0),
            depart2: sortFilter(getQueryString('sortId'), '_', 1),
            disease: sortFilter(getQueryString('sortId'), '_', 2),
            doctor: sortFilter(getQueryString('sortId'), '_', 3),
            depart1_index: sortFilter(getQueryString('sortIndex'), '_', 0),
            depart2_index: sortFilter(getQueryString('sortIndex'), '_', 1),
            disease_index: sortFilter(getQueryString('sortIndex'), '_', 2),
            doctor_index: sortFilter(getQueryString('sortIndex'), '_', 3),
        }

        console.log(picker)
        // $('.search').focus()

        // 选择科室四级
        $('#selectLevel').click(function () {
            $('#main').hide();
            $('#areaModule').show();
        })

        // 搜索结果
        $(document).on('keyup', '.search', function (event) {
            if (event.keyCode == 13) {
                $('.search').val($(this).val())
                $('#main').show();
                $('#areaModule').hide();
                getList(1)
                getVideos(1)
            }
        })

        // 获取联动数据
        gethttp('/ld/courses', {
            loading: true,
            data: {
                type: 'c'
            },
            success: function (res) {
                getList()
                depart1Data = res.data.depart1
                depart2Data = res.data.depart2
                diseaseData = res.data.disease
                doctorData = res.data.doctor
                depart1Data.unshift({
                    id: '',
                    name: '全部',
                    parentId: 0
                })
                depart2Data.unshift({
                    id: '',
                    name: '全部',
                    parentId: 0
                })
                diseaseData.unshift({
                    id: '',
                    name: '全部',
                    parentId: 0
                })
                doctorData.unshift({
                    id: '',
                    name: '全部',
                    parentId: 0
                })

                $('#depart1List').html(getListHtml(depart1Data, 'id', 'name'));

                updatedepart2(0)
                updatedisease(0)
                updatedoctor(0)
            }
        })

        // 获取对应的二级科室
        function updatedepart2(parentIndex) {
            let arr = []
            depart2Data.forEach(function (item, index) {
                if (item.parentId == depart1Data[parentIndex].id || item.parentId == 0) {
                    arr.push(item)
                }
            })
            $('#depart2List').html(getListHtml(arr, 'id', 'name'));
        }
        // 获取对应的疾病
        function updatedisease(parentIndex) {
            let arr = []
            diseaseData.forEach(function (item, index) {
                if (item.departs && item.departs != []) {
                    item.departs.forEach(function (items, indexs) {
                        if (items == depart2Data[parentIndex].id) {
                            arr.push(item)
                        }
                    })
                }
                if (item.id == 0) {
                    arr.push(item)
                }
            })
            $('#diseaseList').html(getListHtml(arr, 'id', 'name'));
        }
        // 获取对应的专家   
        function updatedoctor(parentIndex) {
            let arr = []
            doctorData.forEach(function (item, index) {
                if (item.diseases && item.diseases != []) {
                    item.diseases.forEach(function (items, indexs) {
                        if (items == diseaseData[parentIndex].id) {
                            arr.push(item)
                        }
                    })
                }
                if (item.id == 0) {
                    arr.push(item)
                }
            })
            $('#doctorList').html(getListHtml(arr, 'id', 'name'));
        }

        // 选择省
        $('#depart1List').click(function (e) {
            var $selectEle = $(e.target);
            // if (!$selectEle.attr('data-code')) { return false }
            var index = $selectEle.index();
            changeSelected($selectEle);
            // 更新二级科室 疾病 医生
            updatedepart2(index);
            updatedisease(0);
            updatedoctor(0);
        })

        $('#depart2List').click(function (e) {
            var $selectEle = $(e.target);
            var index = $selectEle.index();
            changeSelected($selectEle);
            // 更新疾病 医生
            updatedisease(index);
            updatedoctor(0);
        })

        $('#diseaseList').click(function (e) {
            var $selectEle = $(e.target);
            var index = $selectEle.index();
            changeSelected($selectEle);
            // 更新医生
            updatedoctor(index);
        })

        $('#doctorList').click(function (e) {
            var $selectEle = $(e.target);
            var index = $selectEle.index();
            changeSelected($selectEle);
        })

        // 确认
        $('#doctorConfirm').click(function () {
            $('#areaModule').hide();
            $('#main').show();
            // html
            $('.oneLevel').html($('#depart1List').find('p.active').html())
            $('.twoLevel').html($('#depart2List').find('p.active').html())
            $('.disease').html($('#diseaseList').find('p.active').html())
            $('.doctor').html($('#doctorList').find('p.active').html())

            // id
            picker.depart1 = $('#depart1List').find('p.active').attr('data-code')
            picker.depart2 = $('#depart2List').find('p.active').attr('data-code')
            picker.disease = $('#diseaseList').find('p.active').attr('data-code')
            picker.doctor = $('#doctorList').find('p.active').attr('data-code')

            // 下标
            picker.depart1_index = $('#depart1List').find('p.active').index()
            picker.depart2_index = $('#depart2List').find('p.active').index()
            picker.disease_index = $('#diseaseList').find('p.active').index()
            picker.doctor_index = $('#doctorList').find('p.active').index()

            page = 0
            pages = 0
            getList(1)
            getVideos(1)
        })

        // 全部课程
        function getList(type) {
            if (type) {
                loading = false
            }
            $(".loadMore").removeClass('hide')
            $('.nolist').hide()
            let params = {
                type: 'c',
                index: page * 10,
                count: 10,
                depart1: picker.depart1,
                depart2: picker.depart2,
                disease: picker.disease,
                doctor: picker.doctor,
                search: $('.search').val()
            }

            gethttp('/lt/course', {
                data: params,
                success: function (res) {
                    let list = res.data.list
                    if (page == 0 && list.length <= 0) {
                        $(".loadMore").hide()
                        loading = false
                        $('.nolist').show()
                        $('.relevant_list1').html('')
                        return false
                    }
                    let arr = []
                    list.forEach(function (item, index) {
                        let html = `<li class="list_item space-border">
                                <div class="hot_top">
                                    <p>${item.learnCountUi}人正在学习｜${item.playCountUi}播放</p>
                                    <p>${item.createdAtUi}上线</p>
                                </div>
                                <div class="hot_center">
                                    <div class="hot_left">
                                        <div class="hot_p1">共${item.serieCount}讲</div>
                                        <img class="hot_img" src="${item.coverUrlUi}" alt="">
                                        <div class="hot_p2">${item.doctorName} 专家</div>
                                    </div>
                                    <div class="hot_right">
                                        <div class="hot_p3 text-cut-one">${item.name}</div>
                                        <div class="hot_p4">${item.doctorName}&emsp;${item.doctorCompetentName}</div>
                                        <div class="hot_p4">${item.doctorHospitalName}&emsp;${item.doctorDepartName}</div>
                                        <div class="hot_p5">${item.labels}</div>
                                        <a href="./ot-classroom-play.html?doctor=${item.doctor}&courseId=${item.id}">
                                            <div class="hot_btn">开始听课</div>
                                        </a>
                                    </div>
                                </div>
                            </li>`
                        arr.push(html)
                    })
                    page == 0 ? $('.relevant_list1').html(arr) : $('.relevant_list1').append(arr)
                    if (list.length < 10) {
                        $(".noMore").removeClass('hide')
                        loading = true;
                    } else {
                        loading = false;
                    }
                    $(".loadMore").addClass('hide')
                },
            })
        }


        // 获取短视频
        getVideos(1)
        function getVideos(type) {
            if (type) {
                loading = false
            }
            $(".loadMore").removeClass('hide')
            gethttp('/ld/videos?type=c', {
                data: {
                    user: getCookie('userId'),
                    index: pages * 10,
                    count: 10,
                    depart1: picker.depart1,
                    depart2: picker.depart2,
                    disease: picker.disease,
                    doctor: picker.doctor,
                    search: $('.search').val()
                },
                success: function (res) {
                    let doctors = res.data.doctor
                    let list = res.data.list
                    let arr = []
                    // $('.pub_small_header .right span').html(doctors.courseCountUi)

                    list.forEach((item, index) => {
                        let html = `<a href="./ot-curriculum-video.html?status=1&doctor=${item.doctor}&course=${item.course}&sortId=${picker.depart1}_${picker.depart2}_${picker.disease}_${picker.doctor}&sortIndex=${picker.depart1_index}_${picker.depart2_index}_${picker.disease_index}_${picker.doctor_index}">
                                        <div class="item">
                                            <div class="item_img">
                                                <img src="${item.coverUrl}" alt="">
                                                <i class="pub-i-play"></i>
                                            </div>
                                            <div class="item_cont">
                                                <p class="text-cut-one">${item.name}</p>
                                                <div><img src="./image/hxl/hxl-doctor08.png" alt="">${item.likeCountUi}</div>
                                            </div>
                                        </div>
                                    </a>`
                        arr.push(html)
                    });

                    pages == 0 ? $('.relevant_list2').html(arr) : $('.relevant_list2').append(arr)
                    if (list.length < 10) {
                        $(".noMore").removeClass('hide')
                        loading = true;
                    } else {
                        loading = false;
                    }
                    $(".loadMore").addClass('hide')
                }
            })
        }

        // 初始化加载更多
        var loading = false
        $(document.body).infinite().on("infinite", function () {
            if (loading) return;
            loading = true;
            status == 0 ? page = Number(page) + 1 : pages = Number(pages) + 1
            status == 0 ? getList() : getVideos();
        });
    </script>
</body>

</html>